<template>
    <van-tabbar v-model="active">
        <van-tabbar-item  replace to="/home" badeg="3">
            <span>首页</span>
            <template #icon="props">
                <img :src="props.active ?  require('../assets/images/ico/home_active.png'):require('../assets/images/ico/home.png')" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item icon="../assets/images/ico/feeds.png" replace to="/feeds" badeg="3">
            <span>服务</span>
            <template #icon="props">
                <img :src="props.active ? require('../assets/images/ico/feeds_active.png'): require('../assets/images/ico/feeds.png')" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item  replace to="/news" badeg="3">
            <span>资讯</span>
            <template #icon="props">
                <img :src="props.active ?  require('../assets/images/ico/news_active.png'):require('../assets/images/ico/news.png')" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item  replace to="/user">
            <span>个人中心</span>
            <template #icon="props">
                <img :src="props.active ? require('../assets/images/ico/user_active.png'): require('../assets/images/ico/user.png')" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>

export default {
    data() {
        return {
            active: 0,
        };
    },
};
</script>